
import React,{useEffect,memo} from 'react';
import {connect} from 'react-redux';
import {RouteComponentProps} from 'react-router';
import {homeAction} from '../../../store/actions';
import style from './index.module.scss';

import CarouselComponent from '../../../components/CarouselComponent';
import Channel from '../../../components/Channel';
import Brand from '../../../components/Brand';
import NewGoods from '../../../components/NewGoods';
import HotGoods from '../../../components/HotGoods';
import Category from '../../../components/Category';
import Topic from '../../../components/Topic';
const WrapCarouselComponent = memo(CarouselComponent);
const WrapChannel = memo(Channel);
const WrapBrand = memo(Brand);
const WrapNewGoods = memo(NewGoods);
const WrapHotGoods = memo(HotGoods);
const WrapCategory = memo(Category);
const WrapTopic = memo(Topic);


interface Iprops {
    banner: Array<object>,
    channel:Array<object>,
    brandList: Array<object>,
    newGoodsList: Array<object>,
    hotGoodsList: Array<object>,
    categoryList: Array<object>,
    topicList: Array<object>
}
interface IstateProps{
    state:any
}
interface IdispatchProps{
    getHome:()=>void
}
const Home:React.FC<Iprops&IstateProps&RouteComponentProps&IdispatchProps> = props=>{
    useEffect(()=>{
        props.getHome()
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    return <div className={style.home}>
        <WrapCarouselComponent banner={props.banner} height="400" />
        <WrapChannel channel={props.channel}/>
        <WrapBrand brandList={props.brandList}/>
        <WrapNewGoods newGoodsList={props.newGoodsList} titleFlag={true}/>
        <WrapHotGoods hotGoodsList={props.hotGoodsList}/>
        <WrapTopic topicList={props.topicList} />
        <WrapCategory categoryList={props.categoryList} />
    </div>
}
const mapStateToProps = (state:any) =>{
  
    return state.home
}
const mapDispatchToProps = (dispatch:Function) =>{
    return {
        getHome:()=>{
            dispatch(homeAction())
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Home)
